<template>
  <div class="box" @mousewheel.prevent="">
    <div class="navbar">
      <div class="left" @click="handlePrev()">
        <van-icon name="arrow-left" />
      </div>

      <div class="center">
        <van-search
          shape="round"
          placeholder="请输入搜索关键词"
        />
      </div>

      <div class="right">
        <van-icon name="share-o" />
        <van-icon name="cart-o" />
        <van-icon name="weapp-nav" />
      </div>
    </div>
    <van-tabs sticky>
      <van-tab title="商品" v-for="val in dataList" :key="val.id">
        <div class="goods">
          <div class="imgBox">
            <van-swipe class="my-swipe" indicator-color="white">
              <van-swipe-item>
                <img :src="val.picture" alt="">
              </van-swipe-item>
              <van-swipe-item>2</van-swipe-item>
              <van-swipe-item>3</van-swipe-item>
              <van-swipe-item>4</van-swipe-item>
            </van-swipe>
          </div>

          <div class="tipBox1">
            <div>
              <h1>¥{{val.price}}</h1>
              <h2>{{val.tip}}</h2>
              <!-- <span>222222</span>
              <p>11111</p> -->
            </div>
          </div>

          <div class="tipBox2">
            <div class="youhui1">
              <h1>优惠</h1>
            </div>
            <div class="youhui2">
              <ul>
                <li>
                  <span>赠品</span>
                  <p>耳机</p>
                </li>
                <li>
                  <span>限时特价</span>
                  <p>限时直降300元</p>
                </li>
                <li>
                  <span>一站式换新</span>
                  <p>APP专享,最高补贴500元</p>
                </li>
              </ul>
            </div>
          </div>

        </div>
      </van-tab>
      <van-tab title="标签 2">内容 2</van-tab>
      <van-tab title="标签 3">内容 3</van-tab>
      <van-tab title="标签 4">内容 4</van-tab>
    </van-tabs>

    <actionbar></actionbar>
    <goods></goods>
  </div>
</template>

<script>
import actionbar from './ActionBar.vue'
import goods from './Goods.vue'
export default {
  components: {
    actionbar,
    goods
  },
  data () {
    return {
      dataList: []
    }
  },
  setup () {
    const active = ref(0)
    return { active }
  },
  mounted () {
    // console.log(this.$route.query)
    // List.vue: this.$route.query.id
    this.request.get('/api/particulars', { id: this.$route.query.id })
      .then((data) => {
        this.dataList = data.data
      })
  },
  methods: {
    handlePrev () {
      window.history.go(-1)
    },
    move (e) {

    }
  }
}
</script>

<style>
.my-swipe .van-swipe-item {
  width: 100%;
  color: #fff;
  font-size: 20px;
  text-align: center;
}
</style>
<style scoped>
.box {
  width: 100%;
}

.navbar {
  width: 100%;
  height: 3rem;
}
.left {
  width: 10%;
  line-height: 3rem;
  float: left;
}
.left i {
  font-size: 1.5rem;
  float: left;
  margin-top: 1rem;
  margin-left: 0.625rem;
}
.center {
  width: 60%;
  height: 3rem;
  float: left;
}
.right {
  width: 30%;
  line-height: 3rem;
  float: left;
}
.right i {
  line-height: 3rem;
  font-size: 1.5rem;
  float: left;
  margin-left: 0.625rem;
}

.topnav {
  width: 100%;
}
.goods {
  width: 100%;
  height: 1000px;
  background-color: #f7f8fa;
}
.goods .imgBox {
  width: 100%;
}
.imgBox img{
  width: 100%;
  height: 100%;
}
.goods .tipBox1{
  width: 97%;
  height: 140px;
  background-color: white;
  margin: 0 auto;
  border-radius: 20px;

}
.tipBox1>div {
  float: left;
}
.tipBox1 h1{
  font-size: 1.3rem;
  color: crimson;
  margin: 10px;
}
.tipBox1 h2{
  font-size: 1rem;
  color: black;
  margin: 10px;
}
.goods .tipBox2{
  width: 97%;
  height: 140px;
  background-color: white;
  margin: 5px auto;
  border-radius: 20px;
}
.tipBox2 .youhui1{
  float: left;
}
.youhui1 h1{
  font-size: 1.2rem;
  color: black;
  margin-top: 0.7rem;
   margin-left: 1rem;
}
.tipBox2 .youhui2{
  float: left;
  margin-left: 10px;
}
.youhui2 li{
  margin: 1rem 0;
}
.youhui2 span{
  display: inline-block;
  border: 1px solid rgb(255, 126, 126);
  color: crimson;
  border-radius: 5px;
  padding: 0 5px;
}
.youhui2 p{
  display: inline-block;
  margin-left: 10px;
  color: black;
  font-size: 13px;
}
</style>
